<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤管理</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* 页面整体布局 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f4f8; /* 浅蓝色背景 */
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1000px;
            margin: 30px auto;
            padding: 20px;
            background-color: #ffffff; /* 白色容器背景 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* 标题样式 */
        h1 {
            text-align: center;
            color: #003366; /* 深蓝色标题 */
            font-size: 28px;
            margin-bottom: 30px;
        }

        /* 查询功能区域样式 */
        .search-form {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .search-form input {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            width: 300px;
            font-size: 16px;
        }

        .search-form button,
        .search-form.button {
            padding: 10px 20px;
            background-color: #0077cc; /* 蓝色按钮 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .search-form button:hover,
        .search-form.button:hover {
            background-color: #005599; /* 深蓝色按钮悬停 */
        }

        /* 通用按钮样式 */
        .button,
        .delete-btn {
            padding: 10px 20px;
            background-color: #0077cc; /* 蓝色按钮 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
            text-decoration: none;
            margin: 5px;
        }

        .button:hover,
        .delete-btn:hover {
            background-color: #005599; /* 深蓝色按钮悬停 */
        }

        /* 删除按钮特殊样式 */
        .delete-btn {
            background-color: #005599; /* 深蓝色删除按钮 */
        }

        .delete-btn:hover {
            background-color: #003366; /* 更深的蓝色按钮悬停 */
        }

        /* 数据展示表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
        }

        th,
        td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #0077cc; /* 蓝色表头 */
            color: white;
        }

        td {
            background-color: #f9f9f9;
        }

        tr:nth-child(even) td {
            background-color: #f1f1f1;
        }

        tr:hover td {
            background-color: #e0f7fa; /* 浅蓝色悬停效果 */
        }

        /* 并排显示按钮 */
        .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

    </style>
</head>

<body>
<div class="container">
    <h1>考勤管理系统</h1>

    <!-- 查询功能 -->
    <div class="search-form">
        <label for="attendanceId">考勤编号：</label>
        <input type="text" id="attendanceId">
        <button onclick="queryById()">按编号查询</button>

        <label for="teacherId">教师编号：</label>
        <input type="text" id="teacherId">
        <button onclick="queryByTeacherId()">按教师查询</button>

        <label for="startDate">开始日期：</label>
        <input type="date" id="startDate">
        <!-- 此处添加换行标签 -->
        <label for="endDate">结束日期：</label>
        <input type="date" id="endDate">
        <button onclick="queryByDateRange()">按日期范围查询</button>

        <label for="status">考勤状态：</label>
        <input type="text" id="status">
        <button onclick="queryByStatus()">按状态查询</button>

        <button onclick="queryAll()">查询全部</button>

        <!-- 添加考勤按钮 -->
        <button class="button" onclick="window.location.href='add_attendance.html'">添加考勤</button>
    </div>

    <!-- 数据展示 -->
    <div>
        <h3>考勤记录</h3>
        <table id="attendanceTable">
            <thead>
            <tr>
                <th>考勤编号</th>
                <th>教师编号</th>
                <th>日期</th>
                <th>上班时间</th>
                <th>下班时间</th>
                <th>考勤状态</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 动态生成 -->
            </tbody>
        </table>
    </div>

    <script>
        function renderTable(data) {
            const tbody = $('#attendanceTable tbody');
            tbody.empty();
            data.forEach(item => {
                tbody.append(`
                    <tr>
                        <td>${item.attendanceId}</td>
                        <td>${item.teacherid}</td>
                        <td>${item.attendanceDate}</td>
                        <td>${item.clockInTime}</td>
                        <td>${item.clockOutTime}</td>
                        <td>${item.attendanceStatus}</td>
                        <td>${item.remarks}</td>
                        <td>
                            <button class="btn-edit" data-id="${item.attendanceId}" onclick="window.location.href='edit_attendance.html?id=' + this.dataset.id">编辑</button>
                            <button class="btn-delete" data-id="${item.attendanceId}" onclick="deleteAttendance(this.dataset.id)">删除</button>
                        </td>
                    </tr>
                `);
            });
        }

        function queryAll() {
            $.get('/attendance/all', function (data) {
                    renderTable(data);
                }
            );
        }

        function queryById() {
            const id = $('#attendanceId').val();
            $.get(`/attendance/${id}`, function (data) {
                renderTable([data]);
            });
        }

        function queryByTeacherId() {
            const teacherId = $('#teacherId').val();
            $.get(`/attendance/teacher/${teacherId}`, function (data) {
                renderTable(data);
            });
        }

        function queryByDateRange() {
            const startDate = $('#startDate').val();
            const endDate = $('#endDate').val();
            $.post('/attendance/dateRange', JSON.stringify({ startDate, endDate }), function (data) {
                renderTable(data);
            });
        }

        function queryByStatus() {
            const status = $('#status').val();
            $.get(`/attendance/status/${status}`, function (data) {
                renderTable(data);
            });
        }

        $(document).ready(function () {
            queryAll(); // 页面加载时查询所有记录
        });

        // 删除按钮点击事件
        function deleteAttendance(id) {
            if (confirm('您确定要删除这条考勤记录吗？')) {
                $.ajax({
                    url: `/attendance/${id}`,
                    method: 'DELETE',
                    success: function () {
                        alert('考勤记录删除成功！');
                        queryAll();
                    }
                });
            }
        }
    </script>
</div>
</body>

</html>